<template>
  <div>
    <!-- 新增todo -->
    <input
      type="text"
      v-model="newTodo"
      @keyup.enter="addTodo"
      placeholder="新增代办事项"
    />
    <!-- todo列表 -->
    <ul>
      <li
        v-for="(item, index) in filterTodos"
        :key="item.id"
        :class="{ action: item.checked, isEdit: editId == item.id }"
      >
        <div class="view">
          <input type="checkbox" v-model="item.checked" />
          <label @dblclick="editTodo(item)">{{ item.title }}</label>
          <button type="button" @click="removeTodo(item)">删除</button>
        </div>
        <input
          type="text"
          class="inp"
          v-model="item.title"
          v-todo-focus="item.id === editId"
          @blur="doneEdit(item)"
          @keyup.enter="doneEdit(item)"
          @keyup.escape="cancelEdit(item)"
        />
      </li>
    </ul>

    <!-- 过滤 -->
    <p>
      <span
        @click="filterType = 'all'"
        :class="{ selected: filterType == 'all' }"
        >all</span
      >
      <span
        @click="filterType = 'noChecked'"
        :class="{ selected: filterType == 'noChecked' }"
        >noChecked</span
      >
      <span
        @click="filterType = 'checked'"
        :class="{ selected: filterType == 'checked' }"
        >checked</span
      >
    </p>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watchEffect,
  watch,
} from "vue";
const filters = {
  all(todos) {
    return todos;
  },
  noChecked(todos) {
    return todos.filter((todo) => !todo.checked);
  },
  checked(todos) {
    return todos.filter((todo) => todo.checked);
  },
};

//缓存操作
const todoStorag = {
  fetch() {
    let arr = JSON.parse(localStorage.getItem("todos") || "[]");
    return arr;
  },
  save(todos) {
    localStorage.setItem("todos", JSON.stringify(todos));
  },
};

export default defineComponent({
  name: "todos",
  setup() {
    const state = reactive({
      newTodo: "",
      todos: todoStorag.fetch(),
      oldTodoTitle: null, //旧todo
      editId: "", //正在编辑的todo的id
      filterType: "all", //筛选类型
      filterTodos: computed(() => {
        return filters[state.filterType](state.todos);
      }),
    });
    function addTodo() {
      // console.log(state.newTodo);
      state.todos.push({
        id: state.todos.length + 1,
        title: state.newTodo,
        checked: false,
      });
      console.log(state.todos);
      state.newTodo = "";
    }
    watchEffect(()=>{
      todoStorag.save(state.todos);
    })
    function editTodo(todo) {
      state.oldTodoTitle = todo;
      state.editId = todo.id;
    }
    function doneEdit(todo) {
      state.editId = "";
    }
    function cancelEdit(todo) {
      console.log(7777);
      todo.title = state.oldTodoTitle;
      state.editId = "";
    }
    function removeTodo(todo) {
      state.todos.splice(state.todos.indexOf(todo), 1);
    }
    return {
      ...toRefs(state),
      addTodo,
      removeTodo,
      doneEdit,
      editTodo,
      cancelEdit,
    };
  },
  directives: {
    //自定义指令
    "todo-focus": (el, binding) => {
      //el，当前元素，binding.value指令的参数
      if (binding.value) {
        el.focus();
      }
    },
  },
});
</script>

<style scoped>
li .inp {
  display: none;
}
li.isEdit .inp {
  display: block;
}
li.isEdit .view {
  display: none;
}
p span {
  margin: 0 10px;
  cursor: pointer;
}
span.selected {
  color: #f00;
}
</style>
